<template>
  <div class="wrap">
    <div class="show-title">管理员账户信息</div>
    <div class="content">
      <el-form
        :inline="true"
        :model="from1.ruleform"
        ref="from1"
        :rules="from1.rules"
        class="demo-form-inline form1"
      >
        <el-form-item label="用户名" prop="user_wanted">
          <el-input
            v-model="from1.ruleform.user_wanted"
            message="用户名"
            :disabled="true"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="modifyNickname">
          <el-input
            v-model="from1.ruleform.modifyNickname"
            message="修改昵称"
            :disabled="
              extra_super_admins.includes(this.$store.state.login.username) ||
              globalToCompany != 'sugon'
                ? false
                : true
            "
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="modifyPwd" show-overflow-tooltip>
          <el-input
            v-model="from1.ruleform.modifyPwd"
            message="修改密码"
            :disabled="
              extra_super_admins.includes(this.$store.state.login.username) ||
              globalToCompany != 'sugon'
                ? false
                : true
            "
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="modifyMobile">
          <el-input
            v-model.number="from1.ruleform.modifyMobile"
            message="修改手机号"
            :disabled="
              extra_super_admins.includes(this.$store.state.login.username) ||
              globalToCompany != 'sugon'
                ? false
                : true
            "
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="modifyEmail">
          <el-input
            v-model="from1.ruleform.modifyEmail"
            message="修改邮箱"
            :disabled="
              extra_super_admins.includes(this.$store.state.login.username) ||
              globalToCompany != 'sugon'
                ? false
                : true
            "
            placeholder
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="token有效期" prop="token_expired">
          <el-input
            v-model="from1.ruleform.token_expired"
            message=""
            placeholder
          ></el-input>
        </el-form-item> -->
        <el-form-item label="登录有效期" prop="token_expired">
          <el-select
            v-model="from1.ruleform.token_expired"
            placeholder="请选择"
          >
            <el-option label="永不失效" :value="0"></el-option>
            <el-option label="10分钟" :value="10"></el-option>
            <el-option label="30分钟" :value="30"></el-option>
            <el-option label="60分钟" :value="60"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="onSubmit1('from1')"
            >保存</el-button
          >
          <el-button type="warning" plain @click="onReset('from1')"
            >重置</el-button
          >
        </el-form-item>
        <span
          class="no_admin"
          v-if="
            extra_super_admins.includes(this.$store.state.login.username) ||
            globalToCompany != 'sugon'
              ? false
              : true
          "
          >非可选项，请联系管理员修改。</span
        >
      </el-form>
    </div>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
export default {
  name: "adminSetting",
  components: {},
  data() {
    var checkPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        // if (this.form.ruleForm.user_pwd !== "") {
        //   this.$refs[form.ruleForm].validateField("checkPass");
        // }
        callback();
      }
    };
    // 自定义验证邮箱
    var checkEmail = (rule, value, callback) => {
      const regEmail =
        /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if (regEmail.test(value)) {
        //console.log(regEmail.test(value));
        return callback();
      } else if (value == "") {
        return callback();
      } else {
        callback(new Error("请输入合法邮箱"));
        //callback();
      }
    };
    // 自定义验证手机号
    var checkPhone = (rule, value, callback) => {
      //console.log(typeof value, "\\\\/");
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
      if (!Number.isInteger(+value)) {
        callback(new Error("请输入数字值"));
      } else {
        if (phoneReg.test(value)) {
          callback();
        } else if (value == "") {
          return callback();
        } else {
          callback(new Error("电话号码格式不正确"));
          // callback();
        }
      }
    };
    return {
      globalToCompany: "",
      //添加1
      from1: {
        ruleform: {
          user_wanted: this.$store.state.login.username,
          modifyNickname: localStorage.getItem("nick_name"),
          modifyPwd: "",
          modifyMobile: localStorage.getItem("mobile"),
          modifyEmail: localStorage.getItem("email"),
          token_expired: "",
        },
        rules: {
          modifyNickname: [
            { required: false, message: "请输入新的昵称", trigger: "blur" },
          ],
          modifyPwd: [
            {
              required: false,
              message: "请输入新的密码",
              trigger: "change",
            },
          ],
          modifyMobile: [
            { required: false, message: "请输入手机号码", trigger: "blur" },
            { validator: checkPhone, trigger: "blur" },
          ],
          modifyEmail: [
            { required: false, message: "请输入邮箱", trigger: "blur" },
            { validator: checkEmail, trigger: "blur" },
          ],
          token_expired: [{ required: false, message: "", trigger: "blur" }],
        },
      },
    };
  },
  computed: {
    //超级管理员，默认空是admin，在config中配置
    extra_super_admins() {
      if (
        Array.isArray(window.extra_super_admins) &&
        window.extra_super_admins.length == 0
      ) {
        window.extra_super_admins = ["admin"];
      } else if (!Array.isArray(window.extra_super_admins)) {
        window.extra_super_admins = [];
      }
      return window.extra_super_admins;
    },
  },
  created() {
    //判断公司
    this.fn_toCompany();
  },
  mounted() {
    var token_expired_local = localStorage.getItem("token_expired");
    if (token_expired_local == 0) {
      this.from1.ruleform.token_expired = "永不失效";
    } else if (token_expired_local == 10) {
      this.from1.ruleform.token_expired = "10分钟";
    } else if (token_expired_local == 30) {
      this.from1.ruleform.token_expired = "30分钟";
    } else if (token_expired_local == 60) {
      this.from1.ruleform.token_expired = "60分钟";
    }
    // this.form1ruleform.token_expired = localStorage.getItem("token_expired") == 0
    //           ? "永不失效"
    //           : localStorage.getItem("token_expired") + "分钟"
  },
  methods: {
    //判断公司
    fn_toCompany() {
      this.globalToCompany = window.toCompany;
    },
    //提交
    onSubmit1(formName) {
      var that = this;
      let token_expired = that.from1.ruleform.token_expired;
      if (token_expired == "永不失效") {
        that.from1.ruleform.token_expired = 0;
      } else if (token_expired == "10分钟") {
        that.from1.ruleform.token_expired = 10;
      } else if (token_expired == "30分钟") {
        that.from1.ruleform.token_expired = 30;
      } else if (token_expired == "60分钟") {
        that.from1.ruleform.token_expired = 60;
      }
      var params;
      if (
        that.$store.state.login.username == "admin" ||
        that.globalToCompany != "sugon"
          ? true
          : false
      ) {
        var params = {
          user_wanted: that.$store.state.login.username,
          user_pwd: that.from1.ruleform.modifyPwd,
          nick_name: that.from1.ruleform.modifyNickname,
          mobile: that.from1.ruleform.modifyMobile,
          email: that.from1.ruleform.modifyEmail,
          token_expired: that.from1.ruleform.token_expired,
        };
      } else {
        var params = {
          user_wanted: that.$store.state.login.username,
          token_expired: that.from1.ruleform.token_expired,
        };
      }

      that.$refs[formName].validate((valid) => {
        if (valid) {
          postData("/adminweb/sys/admin/update", params)
            .then((res) => {
              if (res.code == 0) {
                that.$message.success("修改成功！");
                localStorage.setItem(
                  "nick_name",
                  that.from1.ruleform.modifyNickname
                );
                localStorage.setItem(
                  "mobile",
                  that.from1.ruleform.modifyMobile
                );
                localStorage.setItem("email", that.from1.ruleform.modifyEmail);
                localStorage.setItem(
                  "token_expired",
                  that.from1.ruleform.token_expired
                );
              } else {
                that.$message.error("修改失败");
              }
            })
            .catch((res) => {
              //that.$message.error(res.msg);
            });
        } else {
          that.$message.error("修改失败");
          return false;
        }
      });
    },

    // 重置
    onReset(val) {
      this.$refs[val].resetFields();
    },
  },
  watch: {},
};
</script>
<style scoped>
/* 更改table,表头背景 */
.wrap >>> .el-table--border th,
.el-table__fixed-right-patch {
  /* background: #c0dee2; */
  background: #f0f3f4;
}
.wrap {
  /* margin-bottom: 20px; */
  padding: 20px;
  padding-bottom: 80px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.show-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  position: relative;
  background: #c0dee2;
  padding-left: 30px;
  font-size: 14px;
  margin: 6px 0 20px 0;
  border-radius: 12px 12px 0 0;
  font-weight: bold;
}

.show-title::before {
  content: "";
  width: 2px;
  height: 16px;
  background: #676a6d;
  position: absolute;
  top: 12px;
  left: 15px;
}

.show-title span {
  float: left;
  color: #676a6d;
  margin-left: 25px;
}
.form1 {
  margin-left: 15px;
}
.wrap >>> .el-form-item {
  width: 100% !important;
}

.wrap >>> .el-form-item__label {
  width: 120px !important;
}

.content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.wrap >>> .el-form-item:last-child {
  margin-left: 10% !important;
}

.wrap >>> .demo-form-inline {
  width: 28%;
  height: auto;
  min-height: 400px;
  float: left;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 5px;
  /* background: #fafafa; */
  border-radius: 5px;

  padding: 10px;
}
.wrap >>> .el-input--suffix .el-input__inner {
  padding-right: 18px !important;
}
.no_admin {
  font-size: 14px;
  color: rgb(201, 67, 67);
}
</style>
